<template>
  <zm-body>
    <!-- left -->
    <div class="app-lefter-bg" style="width:28rem"></div>
    <div class="monitors-lefter">
      <zm-box3>
        <el-input
          placeholder="搜索监督员"
          v-model="searchkeyWord"
          @change="getMonitorsdataByKeyWord"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search" @click="getMonitorsdataByKeyWord"></el-button>
        </el-input>
        <ul class="panel-aside-nav">
          <li
            :class="{active:activeMonitorType.id===item.id}"
            v-for="(item,index) in monitorTypeArr"
            :key="index"
            @click="getMonitorsdataByType(item)"
          >{{item.label}}</li>
        </ul>
        <el-tree
          :data="monitorsList"
          default-expand-all
          :props="defaultProps"
          @node-click="handleNodeClick"
          v-loading="listLoading"
        >
          <template slot-scope="{ node, data }">
            <!-- 监督员节点 -->
            <div v-if="data.id" class="monitors-list">
              <div class="monitors-item">
<!--                <div class="monitors-item-avatar">-->
<!--                  <img :src="data.avatar || 'images/monitor-default.png'" alt />-->
<!--                </div>-->
                <div class="monitors-item-main">
                  <div class="monitors-item-name">
                    {{data.label}}
                    <span class="monitors-item-type">{{data.type}}</span>
                  </div>
                  <div class="monitors-item-phone">{{data.humancode}}</div>
                </div>
                <div class="monitors-item-aside">
                  <div class="monitors-item-status" v-if="data.online == 1">在线</div>
                  <!-- <div class="monitors-item-arrow">
                    <i class="iconfont icon-arrow-right-line"></i>
                  </div> -->
                </div>
<!--                <div class="monitors-item-aside">-->
<!--                  <div class="monitors-item-status" v-if="data.status">在线</div>-->
<!--                  <div class="monitors-item-arrow">-->
<!--                    <i class="iconfont icon-arrow-right-line"></i>-->
<!--                  </div>-->
<!--                </div>-->
              </div>
            </div>
            <!-- end 监督员节点 -->
            <!-- 村镇节点 -->
            <template v-else>{{data.label}}（{{data.onlineCount}} / {{data.allCount}}）</template>
            <!-- end 村镇节点 -->
          </template>
        </el-tree>
      </zm-box3>
    </div>
    <!-- end left -->
    <div
      v-loading="mapDataLoading"
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    ></div>
    <!-- 监督员详情弹窗 -->
    <div v-show="showMonitorDrawer" style="position: fixed;right: 0;top: 110px;z-index: 222;">
<!--    <el-drawer    -->
<!--      title="监督员详情"-->
<!--      size="auto"-->
<!--      append-to-body-->
<!--      :visible.sync="showMonitorDrawer"-->
<!--      :with-header="false"-->
<!--      :modal="false"-->
<!--      :wrapperClosable="false"-->
<!--      :modal-append-to-body="false"-->
<!--    >-->
      <a href="javascript:;" @click="closeJdyXq" class="el-drawer-colse-bar"><i class="iconfont icon-close-line"></i></a>
      <div class="monitor-detail-box" v-loading="monitorDetailLoading">
        <!-- 几个数字 -->
        <ul class="monitor-detail-nums">
          <li
          class="animated"
          v-for="(item,index) in monitorNums"
          :key="item.id"
          @click="indexNumClickHandler(item,index)"
        >
          <div class="num">{{item.value || 0}}</div>
          <div class="label">{{item.label}}</div>
        </li>
        </ul>
        <!-- 柱状图 -->
        <div class="bar-chart-box" style="height:150px" ref="monitorBarChart"></div>
        <!-- 监督员基本信息 -->
        <div class="monitor-info-card">
          <div class="monitor-info-card-header">
            <div class="monitor-info-avatar">
              <img :src="activeMonitorInfo.avatar" alt="">
            </div>
            <!-- <div class="monitor-info-main">
              <div class="monitor-info-name">
                {{activeMonitorInfo.name}}
              </div>
              <div class="monitor-info-role">
                {{activeMonitorInfo.role}}
              </div>
            </div> -->
            <div class="monitor-info-btns">
              <el-button round  @click="guiji('point')"><i class="iconfont icon-dizhi f14"></i> 轨迹点</el-button>
              <el-button round type="primary" @click="guiji('line')"><i class="iconfont icon-dizhi f14"></i> 轨迹回放</el-button>
              <el-button round type="success"><i class="iconfont icon-dianying f14"></i> 视频呼叫</el-button>
            </div>
          </div>
          <div class="monitor-info-card-body">
            <ul class="main-info-list">
             <li class="main-info-item">
               <div class="main-info-item-label">姓名</div>
               <div class="main-info-item-value">{{activeMonitorInfo.name}}</div>
             </li>
              <li class="main-info-item">
                <div class="main-info-item-label">ID</div>
                <div class="main-info-item-value">{{activeMonitorInfo.cardNum}}</div>
              </li>
              <!-- <li class="main-info-item">
                <div class="main-info-item-label">联系电话</div>
                <div class="main-info-item-value">{{activeMonitorInfo.phone}}</div>
              </li> -->
<!--              <li class="main-info-item">-->
<!--                <div class="main-info-item-label">出生日期</div>-->
<!--                <div class="main-info-item-value">{{activeMonitorInfo.birthday}}</div>-->
<!--              </li>-->
              <li class="main-info-item">
                <div class="main-info-item-label">性别</div>
                <div class="main-info-item-value">{{activeMonitorInfo.sex}}</div>
              </li>
              <li class="main-info-item">
                <div class="main-info-item-label">部门</div>
                <div class="main-info-item-value">{{activeMonitorInfo.company}}</div>
              </li>
<!--              <li class="main-info-item">-->
<!--                <div class="main-info-item-label">登录时间</div>-->
<!--                <div class="main-info-item-value">{{activeMonitorInfo.loginDate}}</div>-->
<!--              </li>-->
            </ul>
          </div>
        </div>
        <!-- 轨迹框 -->
          <div class="guiji-box">
              <div class="guiji-block">
                  <span class="demonstration">播放速度</span>
                  <el-slider v-model="guijiSpeed" :format-tooltip="formatTooltip" :min="min" :max="max" class="guiji-slider"></el-slider>
              </div>
              <div class="guiji-block">
                  <span class="demonstration">轨迹回放</span>
                  <el-date-picker
                          v-model="guijiDate"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                  </el-date-picker>

              </div>
              <div class="guijiControl">
                  <el-button round type="success" @click="startAnimation">播放</el-button>
                  <el-button round type="warning" @click="pauseAnimation">暂停</el-button>
                  <el-button round type="primary" @click="resumeAnimation">继续</el-button>
                  <el-button round type="danger" @click="stopAnimation">停止</el-button>
<!--                  <el-button round type="info" @click="searchGuiji">查询</el-button>-->
              </div>
          </div>
      </div>
    </div>
    <!-- end 监督员详情弹窗 -->
      <case-list
              v-model="showCaseListDialog"
              :case-filter="activeCaseFilter"
              @list-ready="caseListReadyHandler"
              @case-click="caseClickHandler"
      ></case-list>
      <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        :modal="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="shutVideo"
        :show-close="false">
        <iframe :src="videoUrl" width="100%" height="500px" frameborder="0" name="videoFrame" id="videoFrame"></iframe>
      </el-dialog>
      <el-dialog
        title="轨迹详情"
        append-to-body
        :close-on-click-modal="false"
        :modal="false"
        top="6rem"
        custom-class="el-dragable-dialog default-on-right"
        v-el-drag-dialog
        :visible.sync="gjdialogVisible"
        width="20%">
        <ul class="jgList">
          <li v-for="(item, index) in gjList" :key="index" @click="showGj(item)">
            <div class="left">{{ index == 0 ? '上午' : '下午'}}</div>
            <div class="right">
              {{ item[0].createTime }} - {{ item[item.length-1].createTime }}
<!--              <p>轨迹时长：{{ ( onLineList[index]/ 1000 / 60/ 60).toFixed(2) }} 小时 </p>-->
              <p>轨迹时长：{{ parseInt((onLineList[index] % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) }} 小时 {{parseInt((onLineList[index] % (1000 * 60 * 60)) / (1000 * 60))}} 分钟</p>
            </div>
          </li>
        </ul>
      </el-dialog>
  </zm-body>
</template>

<script>
/*
   功能模块  首页
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
let sbajValue = 0;
let hcajValue = 0;
let sbajArr = [];
let hcajArr = [];
let sbajTitle = [];
let hcajTitle = [];
let guiji,layer,gjMarkerLayer;
let lineArr = [];
let polyline = null;
let passedPolyline;
import elDragDialog from "@/directive/el-drag-dialog";
import CaseList from "../public/caseList";
export default {
  name: "MonitorsIndex",
  components: { CaseList },
  directives: { elDragDialog },
  data() {
    return {
      dialogVisible: false,
      gjdialogVisible: false,
      videoUrl: "",
      showCaseListDialog: false,
      activeCaseFilter: {},
      searchkeyWord: "",
      mapDataLoading: false,
      monitorsList: [],
      activeMonitor: null,
      activeMonitorInfo:{},
      onlineMonitorsList: [],
      markersList: [],
      monitorNums:[],
      showMonitorDrawer: false,
      activeMonitorDrawerId: "",
      monitorBarChart:null,
      monitorDetailLoading:false,
      monitorTypeArr: [
        { id: 0, label: "全部" }
        // { id: 1, label: "普通监督员" },
        // { id: 2, label: "网格类监督员" },
        // { id: 3, label: "综合类监督员" },
        // { id: 4, label: "执法类协管员" }
      ],
      activeMonitorType: {},
      listLoading: false,
      mapReady: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      map: null,
      guijiSpeed: 30,
      min: 20,
      max: 80,
      guijiDate: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0), new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()+1, 0, 0, 0)],
      humanid: -1,
      humancode: '',
      activeCaseObj: {},
      gjList: [],
      onLineList: []
    };
  },
    watch: {
        showCaseListDialog(nv){
            if(!nv){
                this.removeMapMarkers()
            }
        }
    },
  created(){
    this.listLoading = true
    this.$http.get(this.baseUrl.ryTreeUrl, {
      params: {}
    }).then((rel)=>{
      this.monitorsList = rel.data
        let allWgy = rel.data[0].children
        for(let i=0;i<allWgy.length;i++){
            for(let j=0;j<allWgy[i].children.length;j++){
                this.onlineMonitorsList.push({
                    id: i+"_"+j,
                    avatar: "",
                    label: allWgy[i].children[j].label,
                    type: "监督员",
                    status: 1,
                    position: [allWgy[i].children[j].position[0],allWgy[i].children[j].position[1]],
                    phone: allWgy[i].children[j].humancode
                })
            }
        }
        // this.getMonitorsdata();
      this.listLoading = false
    }).catch((error)=>{
      console.log(error)
    })
  },
  mounted() {
    window.vmComponent = this;
    this.activeMonitorType = this.monitorTypeArr[0];
    // this.getMonitorsdata();
    this.$nextTick(() => {
      this.mapInit();
    });
  },
  methods: {
    mapInit() {
      const self = this;
      const AMap = window.AMap;
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
      self.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        // viewMode: "3D",
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 14,
        pitch: 60,
        center: [116.585956,40.125355],
        forceVector: true
      });
        let uUrl = this.baseUrl.WgUrl;
        var wms = new AMap.TileLayer.WMS({
            url: uUrl, // wms服务的url地址
            // url: 'http://111.204.37.131:5051/arcgis/services/WGGD/MapServer/WMSServer', // wms服务的url地址
            blend: false, // 地图级别切换时，不同级别的图片是否进行混合
            tileSize: 512, // 加载WMS图层服务时，图片的分片大小
            params: {
                styles:'default',
                'LAYERS': '0',
                VERSION:'1.3.0'
            } // OGC标准的WMS地图服务的GetMap接口的参数
        });
        wms.setMap(self.map);
    },
    //在地图上添加标注点
    addMarkerToMap(obj) {
      const self = this;
      const AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-monitor-marker" onclick="vmComponent.showMonitorDetail('${obj.id}')">
          <div class="map-monitor-marker__avatar"><img src="${obj.avatar ||
            "images/monitor-default.png"}" /></div>
          <div class="map-monitor-marker__main">
            <div class="map-monitor-marker__name">${obj.label}</div>
<!--            <div class="map-monitor-marker__prop">${obj.unitname}</div>-->
          </div>
      </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-37, -68)
      });
      this.markersList.push(marker);
      // 将 markers 添加到地图
      self.map.add(marker);
      if(obj.position[0] != 0){
        self.map.setCenter([obj.position[0], obj.position[1]]); //设置地图中心点
      }

    },
    removeMapMarkers() {
      this.map.remove(this.markersList);
    },
    shutVideo(){
      this.dialogVisible = false
    },
    //获取Monitors数据
    getMonitorsdata() {
      this.mapDataLoading = true;
      let seletedType = this.activeMonitorType; //类型
      let searchkeyWord = this.searchkeyWord; //搜索关键词

      let params = {
        seletedType,
        searchkeyWord
      };
      this.mapDataLoading = true;
      setTimeout(() => {
        this.listLoading = false;
        this.mapDataLoading = false;

        this.removeMapMarkers(); //往地图上添加标记点前先清除标记点
        for (var i=0;i<this.onlineMonitorsList.length;i++) {
          let item = this.onlineMonitorsList[i];
          this.addMarkerToMap(item);
        }
        //this.map.setCenter([116.613079,40.11893])
      }, 0);
    },
    //类型改变
    getMonitorsdataByType(item) {
      this.activeMonitorType = item;
      this.getMonitorsdata();
    },
    //搜索关键词改变
    getMonitorsdataByKeyWord() {
        let seletedType = this.activeMonitorType; //类型
        let searchkeyWord = this.searchkeyWord; //搜索关键词
        this.$http.get(this.baseUrl.ryTreeUrl, {
            params: {
                humanname: searchkeyWord
            }
        }).then((rel)=>{
            this.onlineMonitorsList = []
            this.monitorsList = rel.data
            let allWgy = rel.data[0].children
            for(let i=0;i<allWgy.length;i++){
                for(let j=0;j<allWgy[i].children.length;j++){
                    this.onlineMonitorsList.push({
                        id: i+"_"+j,
                        avatar: "",
                        label: allWgy[i].children[j].label,
                        type: "监督员",
                        status: 1,
                        position: [allWgy[i].children[j].position[0],allWgy[i].children[j].position[1]],
                        phone: allWgy[i].children[j].humancode
                    })
                }
            }
            this.getMonitorsdata();
            this.listLoading = false;
            this.mapDataLoading = false;
            this.map.setCenter([this.onlineMonitorsList.position[0],this.onlineMonitorsList.position[1]])
        }).catch((e)=>{
            this.listLoading = false;
            this.mapDataLoading = false;
        })

    },
    //点击左侧面板里的监督员
    handleNodeClick(data) {
      if(layer!=null){
        this.map.remove(layer)
      }
      this.gjdialogVisible = false
      this.humanid = data.id;
      this.humancode = data.humancode;
      this.showMonitorDetail(data);
      // this.activeMonitor = data;
      this.removeMapMarkers();
      if(data.position){
        this.addMarkerToMap(data);
      }
    },
    //显示监督员详细信息
    showMonitorDetail(data) {
      this.activeMonitorDrawerId = data.id;
      if(data.id){
        this.getMonitorDetailData(data)
      }
    },
    //ajax获取监督员详情数据
    getMonitorDetailData(userData){
      this.showMonitorDrawer = true;
      this.monitorDetailLoading = true
      let requestUrl = this.baseUrl.jdyxxUrl;
      // requestUrl = 'http://192.168.2.214:8086/tj/serchjdyajxx'
      this.$http.get(requestUrl, {
        params: {
          humancode: userData.id
        }
      }).then((rel)=>{
          sbajValue = 0;
          hcajValue = 0;
          sbajArr = [];
          hcajArr = [];
          sbajTitle = [];
          hcajTitle = [];
        let data = rel.data
        this.monitorDetailLoading = false
        for(let i=0;i< data.sbaj.length;i++){
          sbajValue += data.sbaj[i].SL
          sbajArr.push(data.sbaj[i].SL)
            sbajTitle.push(data.sbaj[i].SJ)
        }
        for(let i=0;i< data.hcaj.length;i++){
          hcajValue += data.hcaj[i].SL
            hcajArr.push(data.hcaj[i].SL)
            hcajTitle.push(data.hcaj[i].SJ)
        }
        this.monitorNums =  [
          { id: 1, label: "上报案件", value: sbajValue },
          { id: 2, label: "核查案件", value: hcajValue },
          { id: 3, label: "轮次", value: 0 },
          { id: 4, label: "轨迹空白次数", value: 0 },
          { id: 5, label: "超网格区域次数", value: 0 },
        ];
        // let zlcs = 0;
        // this.$http.get(this.baseUrl.serchRyGjUrl, {
        //     params: {
        //         humanId: userData.id,
        //         firsttime: new Date().getFullYear()+"-"+(new Date().getMonth()+1) +"-"+new Date().getDate() ,
        //         lasttime: new Date((new Date().getTime()+86400000)).getFullYear()+"-"+(new Date((new Date().getTime()+86400000)).getMonth()+1) +"-"+new Date((new Date().getTime()+86400000)).getDate()
        //     }
        // }).then((rel)=>{
        //   console.log("rel", rel)
        //   zlcs = rel.data.zlcs
        //
        // })
        this.monitorBarChartInit(
            sbajArr,
            sbajTitle, '上报案件'
        );
        this.activeMonitorInfo={
          name: userData.label,
          avatar:'images/monitor-default.png',
          // avatar:'../../../public/images/monitor-default.png',
          role:'监督员',
          cardNum: userData.id,
          id: userData.id,
          phone: userData.phone,
          birthday:'2020/01/01',
          sex: userData.gender == 1 ? "男" : "女",
          company: userData.unitname,
          loginDate:'2020/04/05 12:12:25'
        }
      }).catch((error)=>{
        console.log(error)
      })

    },
    //监督员详情里的柱状图
    monitorBarChartInit(jieArr, xLabels, legendTitle) {
      this.monitorBarChart = this.$echarts.init(this.$refs.monitorBarChart);
      this.monitorBarChart.setOption({
        legend: {
          textStyle: {
            color: "#02A0FF",
            fontSize: 12
          },
          data: "",
          itemWidth: 16, // 图例图形宽度
          itemHeight: 13,
          itemGap: 30
        },
        tooltip: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "20%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#01AAFF"
            }
          },
          data: xLabels
        },
        yAxis: {
          axisLine: {
            show: false,
            onZero: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: "#01AAFF"
            }
          },
            minInterval: 1
        },
        series: [
          {
            type: "bar",
            barWidth: "12px",
            name: legendTitle,
            itemStyle: {
              normal: {
                color: "#0272F8"
              }
            },
            data: jieArr
          }
        ]
      });
    },
    indexNumClickHandler(item, index){
      if(item.id == 1){
          this.monitorBarChartInit(sbajArr, sbajTitle, '上报案件');
          this.showCaseListDialog = true
          this.activeCaseFilter = {
              stage: '上报', //阶段id（1上报、2立案、3作废、4处置、5待办结、6结案）
              stageLabel: '上报', //阶段label（上报、立案、作废、处置、待办结、结案）
              //areaId: row.id, //某某村的id
              areaName: '', //小类名称
              firsttime: '',
              lasttime: '',
              pagename: 'jdysb',
              humancode: this.humanid
          };

      }else if(item.id == 2){
          this.monitorBarChartInit(hcajArr, hcajTitle, '核查案件');
          this.showCaseListDialog = true
          this.activeCaseFilter = {
              stage: '核查', //阶段id（1上报、2立案、3作废、4处置、5待办结、6结案）
              stageLabel: '核查', //阶段label（上报、立案、作废、处置、待办结、结案）
              //areaId: row.id, //某某村的id
              areaName: '', //小类名称
              firsttime: '',
              lasttime: '',
              pagename: 'jdyhc',
              humancode: this.humanid
          };
      }
    },
    guiji(type){
      this.searchGuiji(type)
    },
    formatTooltip(val) {
        return val * 10;
    },
    //案件列表加载完毕
    caseListReadyHandler(list) {
        // this.caseList = list;
        // this.addPointsListToMap();
    },
    //案件列表里的案件item点击
    caseClickHandler(item, index) {
        this.removeMapMarkers();
        this.addCaseMarkerToMap(item, index);
        this.activeCaseObj = item;
        // this.showCaseInfoDialog = true;
        this.map.panTo(item.position);
    },
    //在地图上添加案件标注点
    addCaseMarkerToMap(obj, index) {
      const self = this;
      const AMap = window.AMap;
      const objStr = encodeURIComponent(JSON.stringify(obj));
      // 点标记显示内容，HTML要素字符串
      var markerContent = `<div class="map-icon-marker" style="width:${5 + 5}em">
            <div class="map-icon-marker__icon"><i class="marker-index">${+index + 1}</i> </div>
            <div class="map-icon-marker__label">
            ${obj.title}
            </div>
        </div>`;
      var position = new AMap.LngLat(obj.position[0], obj.position[1]);
      var marker = new AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(3, -66)
      });
      this.markersList.push(marker);
      // 将 markers 添加到地图
      self.map.add(marker);
    },
    //点击事件显示详情，带办理过程
    showAjInfo(item){
      this.showAnjianInfo = item;
      this.showInfo = true
    },
    //查询轨迹
    async searchGuiji(type){
      if(layer!=null){
        this.map.remove(layer)
      }
      if(gjMarkerLayer != null){
        this.map.remove(gjMarkerLayer)
      }
      this.map.clearMap();
      let _this = this;
      let firsttime = this.guijiDate[0].getFullYear()+"-"+(this.guijiDate[0].getMonth()+1) + "-" + this.guijiDate[0].getDate()+" "+(this.guijiDate[0].getHours()<10?'0'+this.guijiDate[0].getHours():this.guijiDate[0].getHours())+":"+(this.guijiDate[0].getMinutes()<10?'0'+this.guijiDate[0].getMinutes():this.guijiDate[0].getMinutes())+":"+(this.guijiDate[0].getSeconds()<10?'0'+this.guijiDate[0].getSeconds():this.guijiDate[0].getSeconds())
      let lasttime = this.guijiDate[1].getFullYear()+"-"+(this.guijiDate[1].getMonth()+1) + "-" + this.guijiDate[1].getDate()+" "+(this.guijiDate[1].getHours()<10?'0'+this.guijiDate[1].getHours():this.guijiDate[1].getHours())+":"+(this.guijiDate[1].getMinutes()<10?'0'+this.guijiDate[1].getMinutes():this.guijiDate[1].getMinutes())+":"+(this.guijiDate[1].getSeconds()<10?'0'+this.guijiDate[1].getSeconds():this.guijiDate[1].getSeconds())
      // if(new Date(lasttime) - new Date(firsttime)> 86400000) {
      //   this.$alert('时间间隔不能大于一天', this.getTitle.title, {
      //     confirmButtonText: '确定'
      //   });
      //   return false
      // }   //86400000
      this.gjList = [];
      if(type == 'line'){
        this.monitorNums[2].value = 0
        let PointArr = [];
        this.onLineList = []
        let am = firsttime.split(" ")[0] + " 13:00:00";
        let a = await this.getGjdata(firsttime, am, this.humanid);
        let p = await this.getGjdata(am, lasttime, this.humanid);
        let amd = a.data.rygjList;
        let pmd = p.data.rygjList;
        if(amd.length<=0 && pmd.length<=0){
          this.$message('暂无轨迹信息');
          this.gjList = []
          this.gjdialogVisible = false
          return false
        }
        if(new Date(lasttime) - new Date(firsttime)<= 86400000){
          let online = 0
          let v
          if(amd.length > 0){
            v = this.traceTimeAct([amd]);
            v.forEach((item, index)=>{
              online += (new Date(item[item.length - 1].createTime) - new Date(item[0].createTime))
              PointArr.push([item[item.length - 1].x, item[item.length - 1].y])
            })
            this.gjList.push(amd);
          }else{
            this.gjList.push([{createTime:  new Date().getFullYear()+"-"+( new Date().getMonth()+1) + "-" +  new Date().getDate()  }]);
          }
          this.onLineList.push(online)
          online > 30 * 60 * 1000 ? this.monitorNums[2].value += 1 : this.monitorNums[2].value = this.monitorNums[2].value

          online = 0
          if(pmd.length > 0){
            v = this.traceTimeAct([pmd]);
            v.forEach((item, index)=>{
              online += (new Date(item[item.length - 1].createTime) - new Date(item[0].createTime))
              PointArr.push([item[item.length - 1].x, item[item.length - 1].y])
            })

            this.gjList.push(pmd);
          }else{
            this.gjList.push([{createTime:  new Date().getFullYear()+"-"+( new Date().getMonth()+1) + "-" +  new Date().getDate()  }]);
          }
          online > 30 * 60 * 1000 ? this.monitorNums[2].value += 1 : this.monitorNums[2].value = this.monitorNums[2].value
          this.onLineList.push(online)
          this.gjdialogVisible = true
        }else{
          this.gjdialogVisible = false
        }

        this.showGj(amd, "#ff8500", false)
        this.showGj(pmd, "#00FF66", false)
        gjMarkerLayer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          collision: false
        });
        this.map.add(gjMarkerLayer);
        let icon = {
          type: 'image',
          image: 'images/icon-bg4.png',
          size: [29, 44],
          anchor: 'bottom-center',
        };
        let markers = []
        for (let i = 0; i < PointArr.length; i++) {
          var curPosition = PointArr[i];
          var curData = {
            position: curPosition,
            icon
          };
          let labelMarker = new AMap.LabelMarker(curData);
          markers.push(labelMarker);
        }
        // 一次性将海量点添加到图层
        gjMarkerLayer.add(markers);

      }else if(type == 'point'){
        this.$http.get(this.baseUrl.serchRyGjUrl, {
          params: {
            humanId: this.humanid,
            firsttime: firsttime,
            lasttime: lasttime
          }
        }).then((rel)=>{
          let ddd = rel.data.rygjList;
          if(ddd.length<=0){
            this.$message('暂无轨迹信息');
            this.gjList = []
            this.gjdialogVisible = false
            return false
          }
          this.map.setZoomAndCenter(13, [116.585956,40.125355]);
          this.gjdialogVisible = false;
          let points = []
          ddd.forEach(point=>{
            points.push([point.x, point.y])
          })
          layer = new AMap.LabelsLayer({
            zooms: [3, 20],
            zIndex: 1000,
            collision: false
          });
          _this.map.add(layer);
          let icon = {
            type: 'image',
            image: 'images/mark.png',
            size: [16, 16],
            anchor: 'bottom-center',
          };
          let markers = []
          for (let i = 0; i < points.length; i++) {
            var curPosition = points[i];
            var curData = {
              position: curPosition,
              icon
            };
            let labelMarker = new AMap.LabelMarker(curData);
            markers.push(labelMarker);
            // 给marker绑定事件
            // labelMarker.on('mouseover', function(e){
            //   let position = e.data.data && e.data.data.position;
            //   if(position){
            //     normalMarker.setContent(
            //       '<div class="amap-info-window">'
            //       + position +
            //       '<div class="amap-info-sharp"></div>' +
            //       '</div>');
            //     normalMarker.setPosition(position);
            //     _this.map.add(normalMarker);
            //   }
            // });
            //
            // labelMarker.on('mouseout', function(){
            //   _this.map.remove(normalMarker);
            // });
          }
          // 一次性将海量点添加到图层
          layer.add(markers);
          var normalMarker = new AMap.Marker({
            anchor: 'bottom-center',
            offset: [0, -15],
          });
        }).catch((e)=>{
          console.log(e)
        })
      }
    },
    getGjdata(firsttime, lasttime, humanid){
      return new Promise((resolve, reject)=>{
        this.$http.get(this.baseUrl.serchRyGjUrl, {
          params: {
            humanId: humanid,
            firsttime: firsttime,
            lasttime: lasttime
          }
        }).then((rel)=>{
          resolve(rel)
        })
      })


    },
    showGj(ddd, color="#ff8500", flag = true){
      lineArr = []
      if(ddd.length <= 0)return false
      if(flag)this.map.clearMap();
      // 创建跟速度信息展示框
      // var infoWindow = new AMap.InfoWindow({
      //     content: ddd[0].createTime
      // });
      let PointArr = []
      for (let i=0; i< ddd.length;i++){
        lineArr.push([ddd[i].x,ddd[i].y])
      }


      polyline = new AMap.Polyline({
          map: this.map,
          path: lineArr,
          showDir:true,
          strokeColor: color,  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          lineJoin: "round", //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
          lineCap :'round' //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
          // strokeStyle: "solid"  //线样式
      });
      passedPolyline = new AMap.Polyline({
        map: this.map,
        // path: lineArr,
        strokeColor: "#FF3333",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        lineJoin: "round", //折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
        lineCap :'round' //折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
        // strokeStyle: "solid"  //线样式
      });
      guiji = new AMap.Marker({
        map: this.map,
        position: [ddd[0].x,ddd[0].y],
        icon: "./images/renzou.gif",
        // icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-20, -25),
        autoRotation: false,
        angle: 0,

      });
      let gjIndex = 0
      guiji.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
          var lastLocation = e.passedPath[e.passedPath.length - 1];
          //移动窗体
          // infoWindow.setPosition(lastLocation);
          // if(gjIndex<ddd.length){
          //   infoWindow.setContent(ddd[gjIndex].createTime)
          //   gjIndex++
          // }

      });
      // 打开信息框
      // infoWindow.open(this.map, guiji.getPosition());

      // 地图自适应缩放
      this.map.setFitView();
      this.map.setCenter([ddd[0].x,ddd[0].y])
      this.map.setZoom(16)
    },
    //轨迹开始
    startAnimation () {
        guiji.moveAlong(lineArr, this.guijiSpeed*10);
    },
    //轨迹停止
    stopAnimation () {
        guiji.stopMove();
    },
    //暂停
    pauseAnimation () {
        guiji.pauseMove();
    },
    //继续
    resumeAnimation () {
        guiji.resumeMove();
    },
    //
    closeJdyXq(){
      if(layer!=null){
        this.map.remove(layer)
      }
      this.showMonitorDrawer=false
      this.map.clearMap()
      this.map.setCenter([116.613079,40.11893])
      this.map.setZoom(12)
      // this.getMonitorsdata()
    },
    traceTimeAct (points) {
      let tracePoints = [];
      for (let i = 0; i < points.length; i++) {
        if (points[i].length > 0) {
          let k_pionts = [];
          for (let k = 0; k < points[i].length; k++) {
            k_pionts.push(points[i][k]);
            if (k < points[i].length - 1) {
              let begin_d = this.dateStrToTimer(points[i][k].createTime);
              let end_d = this.dateStrToTimer(points[i][k + 1].createTime);
              if ((end_d - begin_d) / 1000 > 600) {
                tracePoints.push($.extend(true, [], k_pionts));
                k_pionts = [];
              }
            } else {
              tracePoints.push($.extend(true, [], k_pionts));
              k_pionts = [];
            }
          }
        }
      }
      return tracePoints;
    },
    dateStrToTimer (datestr) {
      let date = new Date(datestr);
      return date.getTime();
    }
  }
};
</script>

<style lang="less">
@import "../../css/mixin.less";
.fadeInUpA();
.fadeInDownA();
.monitors-lefter {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 5;
  width: 24rem;
  .zm-box3 {
    height: calc(100vh - 6rem);
    .el-tree {
      height: calc(100vh - 12.5rem);
      overflow-y: auto;
      .nativeScroll()
    }
  }
}
.monitors-list {
  width: 100%;
  .monitors-item {
    display: flex;
    align-items: center;
    &:hover {
      opacity: 0.7;
    }
    &-avatar {
      width: 2.25rem;
      height: 2.25rem;
      margin-right: 0.5rem;
      img {
        width: 100%;
        border-radius: 2.25rem;
      }
    }
    &-main {
      flex: 1;
      width: 0;
    }
    &-aside {
      display: flex;
      font-size: 0.7rem;
      justify-content: center;
      i {
        font-size: 0.7rem;
        vertical-align: middle;
      }
    }
    &-name {
      font-size: 0.8rem;
      font-weight: bold;
      color: #84AEFC;
    }
    &-type {
      font-size: 0.6rem;
      margin-left: 0.3rem;
      font-weight: normal;
      color: #8765ff;
    }
    &-phone {
      font-size: 0.7rem;
    }
    &-status {
      background-color: #3bac74;
      height: 1rem;
      width: 2.2rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.2rem;
      margin-right: 0.2rem;
    }
  }
}

.panel-aside-nav {
  position: absolute;
  left: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 3rem;
  margin-left: -0.3rem;
  li {
    width: 3.5rem;
    height: 3rem;
    margin-top: 0.6rem;
    background-color: #0e0e5a;
    font-size: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #0281ff;
    border-left: none;
    transition: all 0.3s;
    padding: 0 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
    &.active {
      background-color: #0281ff;
      border-color: #0281ff;
      color: #0b0a2c;
      font-weight: bold;
    }
    &:hover {
      opacity: 0.7;
    }
  }
}
.map-monitor-marker {
  width: 170px;
  border-radius: 60px;
  background-color: rgba(66, 62, 246, 0.95);
  padding: 7px 30px 7px 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
  &:hover {
    opacity: 0.8;
  }
  &::after {
    display: block;
    border: solid 10px transparent;
    border-top-color: rgba(66, 62, 246, 0.95);
    content: "";
    position: absolute;
    left: 30px;
    top: 100%;
  }
  &__avatar {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    img {
      width: 100%;
      display: block;
      border-radius: 44px;
    }
  }
  &__main {
    flex: 1;
    width: 0;
  }
  &__name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &__prop {
    font-size: 12px;
    color: #fff;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.monitor-detail-box {
  width: 600px;
  height: 100vh;
  overflow: auto;
  background-color: #110D7A;
  .monitor-detail-nums {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;

    li {
      padding: 0;
      margin: 0;
      flex: 1;
      height: 5.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.5rem;
      // background-image: url(../../../public/images/leftNumBg.png);
      background-size: 100% 100%;
      flex-direction: column;
      position: relative;
      padding-top: 0.2rem;
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.3s;
      animation-duration: 0.2s;
      background-color: rgba(66, 62, 246, 0.5);
      margin: 0.5rem;
      &:nth-child(1),
      &:nth-child(6) {
        animation-delay: 0.2s;
      }
      &:nth-child(2),
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
      &:nth-child(3),
      &:nth-child(4) {
        animation-delay: 0.6s;
      }
      &:nth-child(3n) {
        margin-bottom: 1rem;
      }
      &:hover {
        opacity: 0.8;
      }
      &:last-child {
        &::after {
          display: none;
        }
      }
      &.active {
        color: #d6ff61;
      }
      .num {
        font-size: 2rem;
      }
      .label {
        font-size: 0.6rem;
      }
    }
  }
}
.monitor-info{
  &-card{
    color: #fff;
    padding: 1rem;
    border: solid 1px rgba(255, 255, 255, 0.2);
    margin: 1rem;
    &-header{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1rem;
      border-bottom: dotted 1px rgba(255, 255, 255, 0.1);
      padding-bottom: 20px;
    }
  }
  &-name{
    font-size: 17px;
    font-weight: bold;
  }
  &-btns{
    margin-left: 15px;
  }
  &-role{
    font-size: 12px;
    font-weight: normal;
    opacity: 0.6;
    margin-top: 2px;
  }
  &-avatar{
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 60px;
    margin-right:15px;
    img{
      width: 100%;
      object-fit: cover;
    }
  }
  &-main{
    flex: 1;
  }
}
    .guiji-block{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 20px;
    }
    .demonstration{
        width: 20%;
        color: #fff;
        text-align: center;
    }
    .guiji-slider{
        width: 400px;
    }
    .guijiControl{
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        margin-top: .2rem;
    }
    .el-range-editor .el-range-input{
        color: #fff;
        background-color: #1d1981;
    }
    .el-input--small .el-input__inner{
        border-radius: 4px !important;
        border: 1px solid #dcdfe6 !important;
        color: #3078E7 !important;
    }
    .el-range-separator{
        color: #fff !important;
    }
  .jgList{
    padding: .5rem 0;
    margin: 0;
    li{
      display: flex;
      list-style: none;
      padding: .5rem 0.5rem;
      &:hover {
        cursor: pointer;
      }
      .left {
        width: 15%;
      }
    }
  }
  
  .jgList li:nth-child(odd){
    background-color: rgba(255, 255, 255, 0.15);
  }
  .amap-info-content{
    color: #000;
  }

</style>
